<template>
  <div class="dashboard-container">
    <section class="data_section">
      <el-card class="box-card">
        <div>
          <el-row :gutter="20" style="margin-bottom: 10px;">
            <el-col :span="6">
              <div class="card-panel user-box">
                <div class="card-panel-icon-wrapper">
                  <i class="fast-icon-home card-panel-icon"></i>
                </div>
                <div class="column-box"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">用户数</div>
                  <span class="card-panel-num">0</span>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-panel order-box">
                <div class="card-panel-icon-wrapper">
                  <i class="fast-icon-home card-panel-icon"></i>
                </div>
                <div class="column-box"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">订单数</div>
                  <span class="card-panel-num">0</span>
                </div>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="card-panel goods-box">
                <div class="card-panel-icon-wrapper">
                  <i class="fast-icon-home card-panel-icon" ></i>
                </div>
                <div class="column-box"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">商品数</div>
                  <span class="card-panel-num">0</span>
                </div>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="card-panel income-box">
                <div class="card-panel-icon-wrapper">
                  <i class="fast-icon-home card-panel-icon" ></i>
                </div>
                <div class="column-box"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">用户数</div>
                  <span class="card-panel-num">0</span>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 10px;">
            <el-col :span="12" style="margin-bottom: 10px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>基本信息</span>
                </div>
                <div>
                  <el-form ref="form" :model="formData" label-width="100px">
                    <el-form-item label="用户名">
                       <label>{{formData.username}}</label>
                    </el-form-item>
                    <el-form-item label="手机号">
                       <label>{{formData.phone}}</label>
                    </el-form-item>
                    <el-form-item label="昵称">
                       <el-input v-model="formData.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="头像">
                      <upload-html
                        v-model="formData.avatar"
                        :value="formData.avatar"
                        v-bind="{ 'options': [], 'children': {}, 'prop': 'avatar', 'action': '', 'autoUpload': false, 'limit': 1, 'UploadType': 'spec', 'isPrivate': 1 }"
                      ></upload-html>
                    </el-form-item>
                    <el-form-item label="上次登录时间">
                       <label>{{getTime(formData.last_login_time)}}</label>
                    </el-form-item>
                    <el-form-item label="上次登录IP">
                       <label>{{formData.last_login_ip}}</label>
                    </el-form-item>
                  
                  </el-form>
                </div>
                <div solt="footer">
                      <div style="height:30px;text-align:right;">
                          <el-button type="primary" @click="submitUser" :loading="isDisabled">确定保存</el-button>
                      </div>
                </div>
              </el-card>
            </el-col>

            <el-col :span="12" style="margin-bottom: 10px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>服务团队</span>
                </div>
                <div>
                  <el-form ref="form" :model="formData" label-width="120px">
                    <el-form-item label="团队成员">
                        <label>童自扬</label>
                    </el-form-item>
                    <el-form-item label="技术维护QQ群">
                        <label style="margin-right:15px;">613315644</label>
                    </el-form-item>
                    <el-form-item label="运营咨询QQ群">
                       <label style="margin-right:15px;">551923457</label>
                    </el-form-item>
                  </el-form>
                </div>
              </el-card>
            </el-col>
          </el-row>
          
        </div>
      </el-card>
    </section>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UploadHtml from "@/widgets/xdh-form/items/upload";
import moment from 'moment'
import {setUserInfo} from '@/api/user'

export default {
  name: "Dashboard",
  components: { UploadHtml},
  computed: {
    ...mapGetters(["name",'userInfo'])
  },
  data(){
    return{
      formData:{
        nickname:'',
        avatar:'',
      },
      isDisabled:false,
      wechatErCode:require('@/assets/wechat/img/qrcode.png')
    }
  },
  mounted(){
    this.formData = JSON.parse(JSON.stringify(this.$store.getters.userInfo));
  },
  methods: {
    getTime(date,format='YYYY-MM-DD hh:mm:ss') {
          if(Number(date) > 0) {
              return moment(date * 1000).format(format)
          }else if((new Date(date)).getTime() > 0) {
              return date;
          }else {
              return '--';
          }
    },
    async submitUser(){
      this.isDisabled = true;
       const res = await setUserInfo(this.formData);
       if(res && res.code === 200) {
        this.isDisabled = false;
        this.$message({
          message: res.msg,
          type: 'success'
        });

        await this.$store.dispatch('user/getInfo');

        return true;
      }

      this.isDisabled = false;
      return false;
      console.log(this.formData);
    }
  }
};
</script>

<style scoped>
.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  /* overflow: hidden; */
  color: #666;
  background: #fff;
  -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.card-panel-icon-wrapper {
  width: 30%;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 16px;
  -webkit-transition: all 0.38s ease-out;
  transition: all 0.38s ease-out;
  border-radius: 6px;
}
.card-panel-icon {
  float: left;
  font-size: 48px;
}
.column-box {
  width: 2px;
  height: 60px;
  background: #e6e6e6;
}
.card-panel-description {
  width: 68%;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 700;
  margin-left: 0;
}
.card-panel-description .card-panel-text {
  line-height: 18px;
  color: rgba(0,0,0,.4);
  font-size: 14px;
  margin-bottom: 12px;
}
.card-panel-description .card-panel-num {
  font-size: 24px;
}

.wechatErCode{
  width:220px;
  height:220px;
  float:left;
}
.wechatErCodeNote{
    font-size: 13px;
    margin-top: 20px;
    width: 60%;
    float: right;
}


.income-box i{
  color: #34bfa3;
}
.income-box:hover,.income-box:hover i,.income-box:hover .card-panel-text{
    color:#FFFFFF !important;
    background-color: #34bfa3;
}


.order-box i{
  color: #36a3f7;
}
.order-box:hover,.order-box:hover i,.order-box:hover .card-panel-text{
    color:#FFFFFF !important;
    background-color: #36a3f7;
}


.goods-box i{
  color: #f4516c;
}
.goods-box:hover,.goods-box:hover i,.goods-box:hover .card-panel-text{
    color:#FFFFFF !important;
    background-color: #f4516c;
}


.user-box i{
  color: #FFB800;
}
.user-box:hover,.user-box:hover i,.user-box:hover .card-panel-text{
    color:#FFFFFF !important;
    background-color: #FFB800;
}
</style>
